<template>
   <div style="width: 80%;padding-left: 10%;padding-right: 10%;" class="news-detail">
        <h1>{{data.new.title}}</h1><br>
            <p class="date">{{ data.new.pubTime }}</p>
        <div class="content" v-html="data.new.content"></div>

        <div class="comments">
            <h2>评论</h2>
            <ul>
                <li v-for="(comment, index) in data.comments" :key="index" class="comment" style="list-style-type: none;">
                    <p class="comment-author">{{ comment.userName }}</p>
                    <p class="comment-content">{{ comment.comment }}</p>
                    <p class="comment-content">{{ comment.commentTime }}</p>
                </li>
            </ul>

            <form @submit.prevent="addComment" class="comment-form">
                <label for="content">评论内容：</label>
                <textarea id="content" v-model="data.content" ></textarea>
                <button type="submit">发表评论</button>
            </form>
        </div>
   </div>
</template>

<script setup>
import store from "@/store"
import { reactive,onMounted } from 'vue';
import axios from 'axios';
const data = reactive({
   new:{},
   comments:[],
   author:"",
   content:""
})

onMounted(() => {
    store.state.user=JSON.parse(localStorage.getItem("user"))
    console.log(store.state.new);
    data.new=store.state.new
    axios.get(`http://localhost:8080/getNewsComment/${data.new.id}`).then(res=>{
         data.comments=res.data
         console.log(res.data);
    }).catch(error=>{
        console.log(error);
    })
})

function addComment(){
    if(data.content){
        axios.get(`http://localhost:8080/InsertNewsComment/${data.new.id}/${store.state.user.userName}/${store.state.user.id}/${data.content}`).then(res=>{
            console.log(res);
        }).catch(error=>{
            console.log(error);
        })
    }
}

</script>

<style scoped>
h1 {
  font-size: 24px;
  margin-bottom: 10px;
}
.news-detail {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 5px;
}
.date{
    margin-bottom: 10px;
}
.content {
  line-height: 1.5;
}

.comments {
  margin-top: 30px;
}

h2 {
  font-size: 20px;
  margin-bottom: 10px;
}

.comment {
  margin-bottom: 20px;
}

.comment-author {
  font-weight: bold;
  margin-bottom: 5px;
}

.comment-content {
  margin-bottom: 10px;
}

.comment-form label {
  display: block;
  margin-bottom: 5px;
}

.comment-form input,
.comment-form textarea {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}

.comment-form button {
  background-color: #007bff;
  color: #fff;
  padding: 5px 10px;
  border: none;
  cursor: pointer;
}

</style>